<script setup>
import {onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
import axios from "axios";
import http from "../../http";  
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()
let forms = ref({
    name: '',
    resource:[],
    pid:"",
    role:0,
    type:""
  })


let resourcelist=ref([])
const getresourcelist=()=>{
  http.get(`app/resource/get_pid_notnull/`)
  .then(res=>{
    resourcelist.value = res.data.data
  })
}

const menuItem=ref([])
let checkall=ref(false)
const handleCheckall=(info)=>{
  if (info) {
    forms.value.resource = resourcelist.value.map((item) => item.id)
    console.log(forms.value.resource)
  } else {
    forms.value.resource = [];
  }
}


const handlecheckone = (xid) => {
  forms.value.resource.push(xid);
  // 查询互斥表
  const index = forms.value.resource.indexOf(xid);
  // console.log(index)
  // console.log('Index of xid:', index, 'for xid:', xid);
  if (index > -1) {
    // 如果找到了，移除它，并指定删除一个元素
    forms.value.resource.splice(index, 1);
    console.log('Removed xid:', xid);
  } 
  console.log('Updated resource array:', forms.value.resource);
};

// const handlecheckone = (xid) => {
//   http.get(`/app/resource_exp/`)
//   .then(res => {
//     resource_explist.value = res.data;
//     let isExclusive = false; // 标志变量，用于记录是否检测到互斥关系

//     // 检查互斥资源
//     const explist = resource_explist.value;
//     explist.forEach(item => {
//       // 检查 xid 是否与 item 的 id 相同，如果是，则检查 item 的 res1 和 res2 是否在已分配的资源中
//       if (item.id === xid) {
//         if (forms.value.resource.includes(item.res1) || forms.value.resource.includes(item.res2)) {
//           alert(`不能同时分配资源 ${xid}，因为它与资源 ${item.res1} 或 ${item.res2} 存在互斥关系。`);
//           isExclusive = true; // 设置标志变量为 true
//         }
//       }
//       // 检查已分配的资源是否与 item 的 id 互斥
//       else if (forms.value.resource.includes(item.id)) {
//         if (item.res1 === xid || item.res2 === xid) {
//           alert(`不能同时分配资源 ${xid}，因为它与资源 ${item.id} 存在互斥关系。`);
//           isExclusive = true; // 设置标志变量为 true
//         }
//       }
//     });

//     // 如果没有互斥关系，执行添加资源的操作
//     if (!isExclusive && !forms.value.resource.includes(xid)) {
//       forms.value.resource.push(xid);
//     }
//     console.log('Updated resource array:', forms.value.resource);
//   })
//   .catch(error => {
//     console.error('Error fetching resource exclusivity list:', error);
//   });
// };

// 添加角色
// const saverole = () => {
//   http.post(`/app/role/add_role/`, forms.value)
//       .then(res => {
//         http.get(`/app/role/?name=${forms.value.name}`)
//         .then(res=>{
//          console.log("==============")
//          forms.value.role = res.data[0].id
//          console.log(forms.value.role)
//          ElMessage.success('添加角色成功')
//          router.push("/role")
//         })
//         console.log(res.data)
//       })
// }




// 添加数据不能同时分配互斥的资源
// const saverole = () => {
//   http.post(`/app/role/add_role/`, forms.value)
//       .then(res => {
//         http.get(`/app/role/?name=${forms.value.name}`)
//         .then(res=>{
//           console.log(res)
//          console.log("==============")
//          forms.value.role = res.data[0].id
//          console.log(forms.value.role)
//          ElMessage.success('添加角色成功')
//          router.push("/role")
//         })
//         console.log(res.data)
//       })
// }



// 获取基础角色
let role_inheritlist=ref([])
const get_role_inherit=()=>{
  http.get(`app/role/get_role_inherit/`)
  .then(res=>{
    console.log(res)
    role_inheritlist.value = res.data.data
  })
}
// 查询互斥列表
let  resource_expList=ref([])
const getresource_explist=()=>{
  http.get(`/app/resource_exp/`)
  .then(res => {
    resource_expList.value = res.data; 
     console.log(resource_expList.value)
  })
}

const saverole = () => {
  // 查询到互斥表数据
    // 检查 forms.value.resource 中的每个资源 ID 是否存在互斥关系
    let hasExclusivity = false;
    for (let i = 0; i < forms.value.resource.length; i++) {
      const resourceId = forms.value.resource[i];
      for (let j = 0; j < resource_expList.value.length; j++) {
        const resource_expone = resource_expList.value[j];
          // 检查 exclusivityItem 的 res1 和 res2 是否在 forms.value.resource 中
        if (forms.value.resource.includes(resource_expone .res1) && forms.value.resource.includes(resource_expone .res2)) {
            ElMessage.warning(`资源 ${resource_expone.res1_name} 和 ${resource_expone.res2_name} 存在互斥关系，请注意`);
            hasExclusivity = true;
            break; // 停止内层循环
        }
      }
      if (hasExclusivity) break; // 如果已经发现互斥关系，停止外层循环
    }
    // 如果没有互斥关系，发送 POST 请求添加角色
    if (!hasExclusivity){
      http.post(`/app/role/add_role/`, forms.value)
      .then(res => {
        // 角色添加成功
          ElMessage.success('添加角色成功');
          router.push("/role");
      });
    }
    if (forms.value.resource.length === resourcelist.value.length){
      confirm("您选择的资源中存在互斥关系，是否确定提交")
      http.post(`/app/role/add_role/`, forms.value)
      .then(res => {
        // 角色添加成功
          ElMessage.success('添加角色成功');
          router.push("/role");
      });
      
    }
}

// const handleCheckall=(info)=>{
//   if (info) {
//     forms.value.resource = menuItem.value.map((item) => item.id)
//   } else {
//     forms.value.resource = [];
//   }
// }
// 选择基础角色查询角色id获取权限
const selectinherit=(info)=>{
  if (info==0){
    forms.value.resource=[]
    forms.value.type = 0
  }else{
    http.get(`/app/role/${info}/`)
    .then(res=>{
      console.log("==============")
      console.log(res.data.resource)
      console.log(info)
      forms.value.resource = res.data.resource.map((item)=>item)
      console.log(forms.value.resource)
      forms.value.type = 1
      forms.value.pid = info
      // res.data.resource
    })
  }
  

}
const gorole=()=>{
  router.push("/role")
}
onMounted(
    ()=>{
        // menuItem.value = JSON.parse(localStorage.getItem("menulist"))
        // console.log(menuItem.value)
        get_role_inherit(),
        getresourcelist(),
        getresource_explist()
    }

)
</script>

<template>
  <el-form :model="forms" label-width="auto" style="max-width: 600px">
    <el-form-item label="继承角色">
    <el-select   v-model = "forms.id" placeholder="请选择继承的角色" style="width: 240px;">
      <el-option lable="基础角色" value="0" @click = selectinherit(0)></el-option>
        <el-option :label="item.name" :value="item.id" v-for = "item,key in role_inheritlist" @click="selectinherit(item.id)" />
      </el-select>
    </el-form-item>
    <el-form-item label="角色名称">
      <el-input v-model="forms.name"  style="width: 240px;"/>
    </el-form-item>
    <!-- <el-form-item label="角色备注">
      <el-input v-model="forms.content" />
    </el-form-item> -->
  </el-form>
  <div style="margin-top: 50px;width: 800px;">
            <h1 style="font-size: 20px;">角色权限</h1>
                <el-checkbox style="margin-top: 10px;" v-model="checkall" @change="handleCheckall">全选
                </el-checkbox>
                <el-checkbox-group  v-model="forms.resource" style="margin-top: 10px;">
                    <el-checkbox  v-for="i in resourcelist" :value="i.id" @change="handlecheckone(i.id)" selected>
                        {{ i.name }}
                    </el-checkbox>
                </el-checkbox-group>
            <!-- </el-form-item> -->
        </div>
            <el-button type="primary" style="margin-top: 20px;margin-right: 20px;" @click="saverole">保存</el-button>
            <el-button style="margin-top: 20px;" @click = "gorole">返回</el-button>

  
   
</template>

<style scoped>
.quan{
 width: 100%;
 height: 100vh;
}

</style>